<template>
  <div class="Alldevicelist">
    <section class="toolTop">
      <el-form :inline="true" class="demo-form-inline">
        <el-row :gutter="18">
          <el-col :span="18">
            <el-form-item class="addBtn">
              <el-button icon="el-icon-plus" @click="addDeviceClick">添 加 设 备</el-button>
              <el-button icon="el-icon-top" @click="handleDeviceConfirationDialog=true">设 备 升 级</el-button>
              <el-button icon="el-icon-s-tools" @click="setClick">设 备 配 置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </section>
    <section class="main">
      <el-form :inline="true" class="demo-form-inline main_form" v-model="searchForm">
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="设备编号">
              <el-input v-model="searchForm.deviceId" placeholder="请输入设备编号"></el-input>
            </el-form-item>
            <el-form-item label="设备名称">
              <el-input v-model="searchForm.deviceName" placeholder="请输入设备名称"></el-input>
            </el-form-item>
            <!-- <el-form-item label="设备状态">
              <el-select v-model="searchForm.deviceStatue" clearable placeholder="请选择">
                <el-option
                  v-for="item in statueData"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>-->
            <el-form-item label="设备类别">
              <el-select v-model="searchForm.deviceType" clearable placeholder="请选择">
                <el-option
                  v-for="item in TypeData"
                  :key="item.deviceModelName"
                  :label="item.deviceModelName"
                  :value="item.deviceModelName"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="searchAllDevice">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <section class="main_table">
        <el-table
          ref="multipleTable"
          v-bind:data="alldevicelistData"
          style="width: 100%"
          v-bind:max-height="height"
          v-bind:header-cell-style="{background: '#1f2548',color:'#fff'}"
          v-bind:cell-style="{padding:'10px'}"
          @selection-change="handleSelectionChange"
          fit
        >
          <el-table-column align="center" type="selection" width="55px"></el-table-column>
          <el-table-column align="center" sortable prop="deviceId" label="设备编号" max-width="120"></el-table-column>
          <el-table-column align="center" sortable prop="deviceName" label="设备名称" max-width="120"></el-table-column>
          <el-table-column align="center" prop="registered" label="设备状态" max-width="120"></el-table-column>
          <el-table-column align="center" sortable prop="deviceType" label="设备类别" max-width="120"></el-table-column>
          <el-table-column align="center" prop="deviceSn" label="设备SN码" max-width="120"></el-table-column>
          <el-table-column align="center" prop="runTime" label="运行时间" max-width="120"></el-table-column>
          <el-table-column align="center" prop="createDate" label="创建时间" max-width="120"></el-table-column>
          <el-table-column align="center" label="操作" max-width="120">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="rowClick(scope.row)"
                type="text"
                class="el-icon-tickets"
                style="color:#1890ff;font-size:3rem"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <section class="toolFoot">
          <el-row :gutter="25">
            <el-col :span="24" class="rightCol">
              <el-pagination
                small
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next ,jumper"
                :total="total"
                :pager-count="5"
              ></el-pagination>
            </el-col>
          </el-row>
        </section>
      </section>
    </section>
    <section class="dialogSec" v-bind:class="{'dialogshow' : handleAddDeviceDialog}">
      <el-form size="mini" label-position="right">
        <section class="title">
          <h3>添加设备</h3>
          <i class="el-icon-close" @click="handleAddDeviceDialog = false"></i>
        </section>
        <div class="wrap">
          <section class="top">
            <el-form-item label="本地文件：" v-bind:label-width="formLabelWidth">
              <el-upload
                class="upload-demo"
                ref="upload"
                :file-list="fileList"
                :before-upload="beforeUpload"
                :limit="1"
                action="#"
                :http-request="addAttachment"
                :multiple="false"
                :on-preview="handlePreview"
                :on-change="handleChangeFile"
                :on-success="handleSuccessfile"
                :on-error="handleErrorFile"
                :on-remove="handleRemoveFile"
                :on-exceed="handleExceed"
              >
                <el-button size="small" type="primary" @click="browseTest">预览</el-button>
              </el-upload>
            </el-form-item>
          </section>
        </div>
        <section class="foot">
          <div slot="footer" class="dialog-footer">
            <el-button size="mini" @click="handleAddDeviceDialog = false">取 消</el-button>
            <el-button size="mini" type="primary" @click="createDevice">确 定 新 增</el-button>
          </div>
        </section>
      </el-form>
    </section>
    <section class="dialogSec" v-bind:class="{'dialogshow' : handleDeviceConfirationDialog}">
      <el-form size="mini" label-position="right" :model="form" style="width:40vw">
        <section class="title">
          <h3>设备升级</h3>
          <i class="el-icon-close" @click="handleDeviceConfirationDialog = false"></i>
        </section>
        <div class="wrap">
          <section class="top">
            <el-form-item label="设备名称" v-bind:label-width="formLabelWidth">
              <el-input placeholder="请输入设备名称" v-model="form.deviceName"></el-input>
            </el-form-item>
            <el-form-item label="选择固件" v-bind:label-width="formLabelWidth">
              <el-select v-model="form.firmware" clearable placeholder="请选择">
                <el-option
                  v-for="item in firmwareData"
                  :key="item.name"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </section>
        </div>
        <section class="foot">
          <div slot="footer" class="dialog-footer">
            <el-button size="mini" @click="handleDeviceConfirationDialog = false">取 消</el-button>
            <el-button size="mini" type="primary" @click="createFirmware">确 定 新 增</el-button>
          </div>
        </section>
      </el-form>
    </section>
  </div>
</template>

<script type="text/javascript" src="../../../api/devicemg/suballdevice/alldevicelist.js"></script>

<style lang="scss">
.Alldevicelist {
  width: 100%;
  margin-top: -2%;
  > section {
    &.toolTop {
      width: 50%;
      display: flex;
      flex-direction: column;
      .el-form {
        .el-form-item__content {
          display: flex;
          margin-top: -12%;
        }
      }
      .el-button {
        background-color: #161836;
        color: #85899c;
        border: 1px solid #85899c;
        height: 30px;
        padding: 7px 20px;
      }
      .el-button:hover,
      .el-button:focus {
        background-color: #161836;
        height: 30px;
        padding: 7px 20px;
        color: #fff;
        border: 1px solid #fff;
      }
    }
    &.main {
      > .main_form {
        .el-input__inner {
          height: 30px;
          line-height: 30px;
          width: 100%;
          background-color: #85899c;
          color: #fff;
          border: 1px solid #85899c;
        }
        .el-form-item__label {
          color: #fff;
        }
        .el-button {
          height: 30px;
          padding: 8px 20px;
          background-color: #44abf5;
        }
      }
      > .main_table {
        > .toolFoot {
          margin-top: 16px;
          .rightCol {
            text-align: right;
            .el-pagination--small {
              white-space: nowrap;
              padding: 2px 5px;
              color: #303133;
              font-weight: 700;
              height: 50px;
              span {
                color: #fff;
                line-height: 30px;
                .el-input {
                  .el-input__inner {
                    height: 30px;
                    line-height: 30px;
                  }
                }
              }
            }
          }
        }
      }
    }
    &.dialogSec {
      .el-form {
        display: flex;
        flex-direction: column;
        .wrap {
          overflow: auto;
          section {
            &.top {
              .el-form-item {
                margin-bottom: 16px;
                .el-input-group__prepend {
                  width: 100px;
                }
                .el-form-item__content{
                  .el-select{
                    width:100%;
                  }
                }
              }
              .el-upload {
                .el-button--primary {
                  width: 300px;
                }
              }
            }
          }
        }
        .foot {
          .el-button--default {
            background-color: #161836;
            font-size: 14px;
            padding: 8px 16px;
            color: #85899c;
            border: 1px solid #85899c;
          }
          .el-button--default:hover,
          .el-button--default:focus {
            background-color: #161836;
            font-size: 14px;
            padding: 8px 16px;
            color: #fff;
            border: 1px solid #fff;
          }
          .el-button--primary {
            padding: 8px 16px;
            font-size: 14px;
            background-color: #44abf5;
            border: 1px solid #44abf5;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>
